<template>
  <div class="volunteer-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <h3>志愿者活动</h3>
              <el-button type="primary" @click="handleApply">申请成为志愿者</el-button>
            </div>
          </template>
          <el-table :data="activityList" style="width: 100%">
            <el-table-column prop="name" label="活动名称" />
            <el-table-column prop="location" label="活动地点" />
            <el-table-column prop="date" label="活动日期" />
            <el-table-column prop="status" label="状态">
              <template #default="{ row }">
                <el-tag :type="row.status === '报名中' ? 'success' : 'info'">{{ row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template #default="{ row }">
                <el-button type="primary" link @click="handleViewDetail(row.id)">查看详情</el-button>
                <el-button type="primary" link @click="handleJoin(row.id)" :disabled="row.status !== '报名中'">立即报名</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 模拟数据
const activityList = ref([
  {
    id: 1,
    name: '社区关爱老人活动',
    location: '北京市朝阳区社区服务中心',
    date: '2023-06-01',
    status: '报名中'
  },
  {
    id: 2,
    name: '环保公益行动',
    location: '北京市海淀区公园',
    date: '2023-06-15',
    status: '报名中'
  }
])

const handleApply = () => {
  ElMessage.success('申请已提交，请等待审核')
}

const handleViewDetail = (id: number) => {
  // TODO: 实现查看详情逻辑
}

const handleJoin = (id: number) => {
  ElMessage.success('报名成功')
}
</script>

<style lang="scss" scoped>
.volunteer-container {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    h3 {
      margin: 0;
      color: #303133;
    }
  }
}
</style>